<template>
    <view>
        <!-- <back></back> -->
        <view class="tabs">
            <u-tabs
                ref="tabs"
                :current="current"
                :list="tabList"
                bar-height="6"
                bar-width="50"
                active-color="#606DCE"
                font-size="28"
                inactive-color="#888888"
                :is-scroll="false"
                @change="change"
            ></u-tabs>
        </view>
        <mescroll-body
            :sticky="true"
            ref="mescrollRef"
            @init="mescrollInit"
            @down="downCallback"
            @up="upCallback"
        >
            <view class="all">
                <view
                    class="card"
                    v-for="(item, index) in flowList"
                    :key="index"
                    @click="$func.jump('/yCreate/pages/orderDetail?id=' + item.id)"
                >
                    <view class="shop-message u-flex">
                        <image src="@/static/yCreate/shopIcon.png" mode="widthFix"></image>
                        <view>{{ item.shop.shopname }}</view>
                        <view class="standing standing2 u-flex-center" v-if="item.shop.isself == 1"
                            >平台</view
                        >
                        <view class="standing u-flex-center" v-else>商家</view>
                    </view>
                    <view class="top u-flex-center u-row-between">
                        <view>订单号：{{ item.order_no }}</view>
                        <view class="state" style="color: #ff0000" v-if="item.state == 1"
                            >待支付</view
                        >
                        <view class="state" v-if="item.state == 2">待发货</view>
                        <view class="state" style="color: #ff0000" v-if="item.state == 3"
                            >待收货</view
                        >
                        <view class="state" v-if="item.state == 7">已取消</view>
                        <view class="state" style="color: #606dce" v-if="item.state == 6"
                            >已完成</view
                        >
                        <view class="state" style="color: #606dce" v-if="item.state == 4"
                            >待评价</view
                        >
                    </view>
                    <view
                        class="u-flex-center u-row-left u-m-b-20"
                        v-for="(_item, _index) in item.goods"
                    >
                        <image :src="_item.image" mode="aspectFill" class="head-img"></image>
                        <view class="cont">
                            <view class="name u-line-2">{{ _item.title }}</view>
                            <view class="cate">规格：{{ _item.difference }}</view>
                            <view class="u-flex u-row-between">
                                <view class="price"><text>￥</text>{{ _item.price }}</view>
                                <view class="number">×{{ _item.number }}</view>
                            </view>
                        </view>
                    </view>
                    <!-- v-if="current==2" -->
                    <view class="u-border-top u-m-t-30 u-p-t-20">
                        <view class="u-flex u-row-right u-p-b-20"
                            >运费：{{ item.pay.freight_price }}</view
                        >
                        <view
                            class="u-flex-center u-row-between"
                            v-if="
                                item.state == 1 ||
                                item.state == 2 ||
                                item.state == 3 ||
                                item.state == 4
                            "
                        >
                            <view></view>
                            <!-- <view class="time" @click="cancel(item.id)" v-if="item.state==1">剩余支付时间：23:59:59</view> -->
                            <!-- <text>预计5天后送达</text> -->
                            <view class="u-flex-center">
                                <view
                                    class="button button1"
                                    @click.stop="cancel(item.id, item.state)"
                                    v-if="item.state == 1 || item.state == 2"
                                    >取消订单</view
                                >
                                <view
                                    class="button"
                                    @click.stop="pay(item.id)"
                                    v-if="item.state == 1"
                                    >立即付款</view
                                >
                                <view
                                    class="button"
                                    @click.stop="confirm(item.id)"
                                    v-if="item.state == 3"
                                    >确认收货</view
                                >
                                <view
                                    class="button"
                                    @click.stop="$func.jump('/wNew/pages/evaluate?id=' + item.id)"
                                    v-if="item.state == 4"
                                    >待评价</view
                                >
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </mescroll-body>
    </view>
</template>

<script>
//#ifdef  H5
var wx = require("jweixin-module");
//#endif
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
        return {
            tabList: [
                {
                    name: "全部",
                },
                {
                    name: "待支付",
                },
                {
                    name: "待发货",
                },
                {
                    name: "待收货",
                },
                {
                    name: "待评价",
                },
            ],
            flowList: [],
            current: 0,
        };
    },
    onShow() {
        this.mescroll.resetUpScroll();
    },
    methods: {
        cancel(id, type) {
            let path;
            if (type == 1) {
                path = "/api/wanlshop/order/cancelOrder";
            } else if (type == 2) {
                path = "/api/wanlshop/order/cancelOrder_dfh";
            }
            this.$u
                .post(path, {
                    id: id,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.mescroll.resetUpScroll();
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
        },
        pay(id) {
            let that = this;
            let method = "";
            //#ifdef  H5
            method = "mp";
            //#endif
            this.$u
                .post("/api/wanlshop/pay/payment", {
                    code: null,
                    method: method,
                    order_id: id,
                    order_type: "goods",
                    type: "wechat",
                })
                .then((res) => {
                    this.$u.toast(res.msg);
                    if (res.code == 1) {
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: res.data.appId, // 必填，公众号的唯一标识
                            timestamp: res.data.timeStamp, // 必填，生成签名的时间戳
                            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
                            signature: res.data.paySign, // 必填，签名
                            jsApiList: ["chooseWXPay"], // 必填，需要使用的JS接口列表
                        });
                        wx.ready(function () {
                            wx.chooseWXPay({
                                timestamp: res.data.timeStamp, // 时间戳
                                nonceStr: res.data.nonceStr, // 随机数
                                package: res.data.package, //
                                signType: res.data.signType,
                                paySign: res.data.paySign, // 签名
                                success: function () {
                                    uni.showToast({
                                        title: "支付成功",
                                    });
                                    that.mescroll.resetUpScroll();
                                },
                                cancel: function () {
                                    uni.showToast({
                                        title: "取消支付",
                                        icon: "none",
                                    });
                                    that.mescroll.resetUpScroll();
                                },
                                fail: function () {
                                    uni.showToast({
                                        title: "支付失败",
                                        icon: "none",
                                    });
                                    that.mescroll.resetUpScroll();
                                },
                            });
                        });
                    }
                });
        },
        confirm(id) {
            this.$u
                .post("/api/wanlshop/order/confirmOrder", {
                    id: id,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.mescroll.resetUpScroll();
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
        },
        upCallback(page) {
            this.mescroll.optDown.use = false;
            this.mescroll.optUp.textNoMore = "-已经到底啦-";
            this.$u
                .get("/api/wanlshop/order/getOrderList", {
                    page: page.num,
                    state: this.current,
                })
                .then((res) => {
                    this.mescroll.endBySize(res.data.data.length, res.data.total);
                    if (page.num == 1) this.flowList = []; //如果是第一页需手动制空列表
                    this.flowList = this.flowList.concat(res.data.data); //追加新数据
                })
                .catch(() => {
                    //联网失败, 结束加载
                    this.mescroll.endErr();
                });
        },
        change(index) {
            this.current = index;
            this.mescroll.resetUpScroll();
        },
    },
};
</script>

<style lang="scss">
page {
    background-color: #f6f6f6;
}

.tabs {
    position: sticky;
    top: 0;
    z-index: 999;
}

.all {
    padding: 0 24rpx;

    .card {
        width: 100%;
        margin-top: 18rpx;
        padding: 30rpx 20rpx;
        background: #ffffff;
        border-radius: 10rpx;

        .shop-message {
            font-size: 32rpx;

            image {
                width: 28rpx;
                height: auto;
                margin-right: 10rpx;
            }

            .standing {
                margin-left: 18rpx;
                width: 64rpx;
                height: 32rpx;
                background: #f43000;
                border-radius: 4rpx;
                font-size: 24rpx;
                color: #ffffff;
            }

            .standing2 {
                background: #606dce;
            }
        }

        .top {
            margin: 30rpx 0;
            font-size: 24rpx;

            .state {
                color: #888;
            }
        }

        .head-img {
            width: 160rpx;
            height: 160rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
            flex-shrink: 0;
        }

        .cont {
            width: 100%;

            .name {
                margin-bottom: 12rpx;
                font-size: 28rpx;
            }

            .cate {
                width: fit-content;
                width: -webkit-fit-content;
                width: -moz-fit-content;
                padding: 3rpx;
                background: #fafafa;
                font-size: 22rpx;
                border-radius: 5rpx;
            }

            .content {
                font-size: 24rpx;
                color: #888888;
            }

            .bot {
                margin-top: 40rpx;
                font-size: 26rpx;
                color: #888;

                .price {
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #da0000;
                }

                text {
                    font-size: 32rpx;
                }
            }

            .price {
                font-size: 40rpx !important;
                font-weight: 550;
                color: #ef5205;

                text {
                    font-weight: 500;
                    font-size: 20rpx;
                }
            }

            .number {
                font-size: 28rpx;
                font-weight: bold;
                color: #222222;
            }
        }
    }
}

.time {
    font-size: 24rpx;
    color: #888888;
}

.button {
    margin-left: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 140rpx;
    height: 52rpx;
    background: linear-gradient(135deg, #2bb984 0%, #8cd994 100%);
    border-radius: 40rpx;
    font-size: 24rpx;
    color: #ffffff;
}

.button1 {
    border: 1rpx solid #888888;
    background: #fff;
    color: #888888;
}
</style>
